<template>
  <div class="profile-container">
    <div class="main-content">
      <Sidebar />
      <div class="profile-content">
        <!-- 个人信息卡片 -->
        <div class="profile-card">
          <div class="profile-header">
            <div class="avatar-large">
              <img :src="userInfo.avatar || 'https://example.com/avatars/default.jpg'" :alt="userInfo.nickname || userInfo.username" />
            </div>
            <div class="profile-basic">
              <h1>{{ userInfo.nickname || userInfo.username }}</h1>
              <p>{{ userInfo.email }}</p>
              <div class="user-level">
                <span>等级: {{ userInfo.userLevel }}</span>
                <span>账号状态: {{ userInfo.accountStatus === 1 ? '正常' : '禁用' }}</span>
              </div>
            </div>
          </div>
          
          <!-- 存储信息 -->
          <div class="storage-info">
            <div class="storage-item">
              <span>总存储</span>
              <span>{{ userInfo.totalCapacity }}GB</span>
            </div>
            <div class="storage-item">
              <span>已用</span>
              <span>{{ userInfo.usedCapacity }}GB</span>
            </div>
            <div class="storage-item">
              <span>剩余</span>
              <span>{{ userInfo.totalCapacity - userInfo.usedCapacity }}GB</span>
            </div>
            <div class="storage-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: (userInfo.usedCapacity / userInfo.totalCapacity) * 100 + '%' }"></div>
              </div>
              <span class="progress-text">{{ Math.round((userInfo.usedCapacity / userInfo.totalCapacity) * 100) }}% 已使用</span>
            </div>
          </div>
        </div>
        
        <!-- 详细信息 -->
        <div class="profile-details">
          <h2>账户信息</h2>
          <div class="info-grid">
            <div class="info-item">
              <label>用户名</label>
              <span>{{ userInfo.username }}</span>
            </div>
            <div class="info-item">
              <label>手机号</label>
              <span>{{ userInfo.phone || '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>邮箱</label>
              <span>{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
              <label>性别</label>
              <span>{{ userInfo.gender === 1 ? '男' : userInfo.gender === 2 ? '女' : '未设置' }}</span>
            </div>
            <div class="info-item">
              <label>注册时间</label>
              <span>{{ formatDate(userInfo.registerTime) }}</span>
            </div>
            <div class="info-item">
              <label>上次登录</label>
              <span>{{ formatDate(userInfo.lastLoginTime) }}</span>
            </div>
            <div class="info-item">
              <label>上次登录IP</label>
              <span>{{ userInfo.lastLoginIp }}</span>
            </div>
            <div class="info-item">
              <label>VIP到期时间</label>
              <span>{{ formatDate(userInfo.vipExpireTime) }}</span>
            </div>
            <div class="info-item">
              <label>邀请码</label>
              <span>{{ userInfo.invitationCode || '未生成' }}</span>
            </div>
            <div class="info-item">
              <label>邀请人</label>
              <span>{{ userInfo.invitedBy ? 'ID: ' + userInfo.invitedBy : '无' }}</span>
            </div>
          </div>
        </div>
        
        <!-- 安全信息 -->
        <div class="profile-security">
          <h2>安全设置</h2>
          <div class="info-grid">
            <div class="info-item">
              <label>邮箱验证</label>
              <span class="status-{{ userInfo.emailVerified ? 'success' : 'warning' }}">{{ userInfo.emailVerified ? '已验证' : '未验证' }}</span>
            </div>
            <div class="info-item">
              <label>手机验证</label>
              <span class="status-{{ userInfo.phoneVerified ? 'success' : 'warning' }}">{{ userInfo.phoneVerified ? '已验证' : '未验证' }}</span>
            </div>
            <div class="info-item">
              <label>两步验证</label>
              <span class="status-{{ userInfo.twoFactorAuth ? 'success' : 'warning' }}">{{ userInfo.twoFactorAuth ? '已开启' : '未开启' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Sidebar from '../components/Sidebar.vue'

// 用户信息
const userInfo = ref({
  userId: 0,
  username: '',
  email: '',
  phone: '',
  nickname: '',
  avatar: '',
  totalCapacity: 0,
  usedCapacity: 0,
  accountStatus: 0,
  userLevel: 0,
  lastLoginTime: '',
  lastLoginIp: '',
  registerTime: '',
  emailVerified: 0,
  phoneVerified: 0,
  twoFactorAuth: 0,
  vipExpireTime: '',
  invitationCode: '',
  invitedBy: 0,
  gender: 0
})

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '未设置'
  const date = new Date(dateStr.replace(' ', 'T'))
  return date.toLocaleString('zh-CN')
}

// 页面加载时获取用户信息
onMounted(() => {
  const storedUser = localStorage.getItem('user')
  if (storedUser) {
    try {
      userInfo.value = JSON.parse(storedUser)
    } catch (error) {
      console.error('解析用户信息失败:', error)
    }
  }
})
</script>

<style scoped>
.profile-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f7fa;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.profile-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.profile-card {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.avatar-large {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30px;
  border: 3px solid #e0e0e0;
}

.avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-basic h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: #333;
}

.profile-basic p {
  margin: 0 0 12px 0;
  color: #666;
}

.user-level {
  display: flex;
  gap: 20px;
  font-size: 14px;
  color: #999;
}

.storage-info {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.storage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}

.storage-item span:first-child {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

.storage-item span:last-child {
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.storage-progress {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.progress-bar {
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-fill {
  height: 100%;
  background-color: #0074D9;
  transition: width 0.3s ease;
}

.progress-text {
  font-size: 14px;
  color: #666;
  text-align: right;
}

.profile-details,
.profile-security {
  background: white;
  border-radius: 8px;
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-details h2,
.profile-security h2 {
  margin: 0 0 20px 0;
  font-size: 18px;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item label {
  font-size: 14px;
  color: #999;
  margin-bottom: 4px;
}

.info-item span {
  font-size: 16px;
  color: #333;
}

.status-success {
  color: #065f46 !important;
}

.status-warning {
  color: #d97706 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .avatar-large {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .storage-info {
    flex-direction: column;
    gap: 15px;
  }
  
  .storage-item,
  .storage-progress {
    min-width: auto;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>